<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" import="java.util.*,com.model.*" isELIgnored="false"%>
    
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%pageContext.setAttribute("path", request.getContextPath()); %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>商品种类管理</title>
<style type="text/css">
.search1{
width:50px;
height: 30px;
margin-right: 500px;
}
</style>

<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 

<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>

<form action="">
<div class="container">
	<div class="row clearfix">
		<div class="col-md-12 column">
			<h3 class="text-center">
				商品类别维护
			</h3>
		</div>
	</div>
</div>
					
				
<div class="container">
	<div class="row clearfix">
		<div class="col-md-12 column">
			 <button type="button" class="btn btn-link btn-lg" onClick="location.href='AddType.jsp'">新增商品类别</button>
			 
			
		</div>
	</div>
</div>

<div class="container"  >
	<div class="row clearfix">
		<div class="col-md-12 column">
			<table class="table table-bordered" >
				<thead>
					<tr>
						<th>
							编号
						</th>
						<th>
							名称
						</th>
						
						<th>
							价格
						</th>
						<th>
							种类
						</th>
						<td>
						照片
						</td>
						<th>
							描述
						</th>
						<th>
							操作
						</th>
						
					</tr>
				</thead>
				<c:choose >
				<c:when test="${not empty products }">
				<c:forEach items="${products }" var="product">
					<tr>
					<td>${product.pid}</td>
					<td>${product.pname }</td>
					<td>${product.pprice} </td>
					<td>${product.kid} </td>
					<td>${product.pimage} </td>
					<td>${product.pdesc} </td>
					
					<td>
					<button type="button" onclick='amend(this);'>修改</button>
					<button type="button" onclick='drop(this);'>删除</button>
					</td>
			</tr> 
			</c:forEach>
				</c:when>
				
			<c:otherwise>
			没有数据
			</c:otherwise>
				</c:choose>
				
				
			 
				
				
</table>
</div>
	</div>
	
</div>

</form>
	<script type="text/javascript" src="${path }/js/jquery-1.9.1.min.js"></script>
	<script type="text/javascript">
	
		function amend(object){
			var tr = $(object).parent().parent();
			for(var i=1;i<=6;i++){
				tr.children().eq(i).html("<input type='text' value="+tr.children().eq(i).text()+"/>");
				if(i==6){
					tr.children().eq(i).html("<input type='button' onclick='confirm(this);' value='确认修改'>");
				}
			}
		}
		function confirm(object){
			var tr = $(object).parent().parent();
			var id = tr.children().eq(0).html();
			var name = tr.children().eq(1).children().val();
			var price = tr.children().eq(2).children().val();
			var type = tr.children().eq(3).children().val();
			var pic = tr.children().eq(4).children().val();
			var des = tr.children().eq(5).children().val();
			$.ajax({
				url:"UpdateServlet",
				data:{
					pid:id,
					pname:name,
					pprice:price,
					kid:type,
					pimage:pic,
					pdesc:des
				},
				type:"post",
				dataType:"json",
				success:function(data){
					tr.children().eq(1).html(name);
					tr.children().eq(2).html(price);
					tr.children().eq(3).html(type);
					tr.children().eq(4).html(pic);
					tr.children().eq(5).html(des);
					tr.children().eq(6).html("<button type='button' onclick='amend(this);'>修改</button><button type='button' onclick='drop(this);'>删除</button>");
				}
			});
		}
		
		function drop(object){
			var tr = $(object).parent().parent();
			var id = tr.children().eq(0).html();
			$.ajax({
				url:'DeleteServlet',
				data:{
					pid:id
				},
				type:"post",
				dataType:"json",
				success:function(data){
					if(data==1){
						tr.remove();
					}
				}
			});
		}
		
	</script>
</body>
</html>